<script setup lang="ts">
  import {
    // Tabs,
    // TabPane,
    Card,
    Row,
    Col,
    // Avatar,
    Button,
    // Image,
    // Popover,
    // Divider,
  } from '@arco-design/web-vue';
  import { reactive, toRefs } from 'vue';
  interface FilterCardProp {
    bordered?: boolean;
    loading?: boolean;
    hoverable?: boolean;
  }
  const props = withDefaults(defineProps<FilterCardProp>(), {
    bordered: false,
    loading: false,
    hoverable: true,
  });
  const { bordered, hoverable, loading } = toRefs(props);

  const emits = defineEmits(['select']);

  const occupations = [
    {
      id: 0,
      name: '全部',
    },
    {
      id: 1,
      name: '产品经理',
    },
    {
      id: 2,
      name: '前端开发',
    },
    {
      id: 3,
      name: '后端开发',
    },
    {
      id: 4,
      name: 'UI/UX',
    },
    {
      id: 5,
      name: '运营',
    },
    {
      id: 6,
      name: '插画师',
    },
  ];
  const modes = [
    {
      id: 0,
      name: '全部',
    },
    {
      id: 1,
      name: '线上组队',
    },
    {
      id: 2,
      name: 'DAO',
    },
    {
      id: 3,
      name: '社区招募',
    },
    {
      id: 4,
      name: '公司招聘',
    },
  ];
  const citys = [
    {
      id: 0,
      name: '全部',
    },
    {
      id: 1,
      name: '北京',
    },
    {
      id: 2,
      name: '上海',
    },
    {
      id: 3,
      name: '深圳',
    },
    {
      id: 4,
      name: '杭州',
    },
    {
      id: 5,
      name: '海外',
    },
    {
      id: 6,
      name: '香港',
    },
  ];

  const sorts = [
    {
      id: 0,
      name: '全部',
    },
    {
      id: 1,
      name: '最新',
    },
    {
      id: 2,
      name: '最热',
    },
  ];
  const filterData = reactive({
    form: {
      occupation: 0,
      city: 0,
      mode: 0,
      sort: 0,
    },
  });

  function handleSelect(item, type: string) {
    filterData.form[type] = item.id;
    emits('select', filterData.form);
  }
</script>

<template>
  <Card :bordered="bordered" :hoverable="hoverable" :loading="loading">
    <Row class="my-3">
      <Col :span="2" class="text-right">职业：</Col>
      <Col :span="22" class="px-4 box-border overflow-x-auto">
        <Button
          v-for="item of occupations"
          :key="item?.id"
          :type="filterData?.form?.occupation === item?.id ? 'primary' : undefined"
          shape="round"
          size="small"
          class="mr-4"
          @click="handleSelect(item, 'occupation')"
          >{{ item?.name }}</Button
        >
      </Col>
    </Row>
    <Row class="my-3">
      <Col :span="2" class="text-right">城市：</Col>
      <Col :span="22" class="px-4 box-border overflow-x-auto">
        <Button
          v-for="item of citys"
          :key="item?.id"
          :type="filterData?.form?.city === item?.id ? 'primary' : undefined"
          shape="round"
          size="small"
          class="mr-4"
          @click="handleSelect(item, 'city')"
          >{{ item?.name }}</Button
        >
      </Col>
    </Row>
    <Row class="my-3">
      <Col :span="2" class="text-right">方式：</Col>

      <Col :span="22" class="px-4 box-border overflow-x-auto">
        <Button
          v-for="item of modes"
          :key="item?.id"
          :type="filterData?.form?.mode === item?.id ? 'primary' : undefined"
          shape="round"
          size="small"
          class="mr-4"
          @click="handleSelect(item, 'mode')"
          >{{ item?.name }}</Button
        >
      </Col>
    </Row>
    <Row class="my-3">
      <Col :span="2" class="text-right">排序：</Col>

      <Col :span="22" class="px-4 box-border overflow-x-auto">
        <Button
          v-for="item of sorts"
          :key="item?.id"
          :type="filterData?.form?.sort === item?.id ? 'primary' : undefined"
          shape="round"
          size="small"
          class="mr-4"
          @click="handleSelect(item, 'sort')"
          >{{ item?.name }}</Button
        >
      </Col>
    </Row>
  </Card>
</template>
